﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>框架首页布局</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../assets/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="page-wraper">
        <div class="returnback" id="returnTop">
            <a href="javascript:void(0);">
                <i class="fa fa-arrow-up"></i>
            </a>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">框架首页布局</h3>
            </div>
            <div class="panel-body">
                <pre><code data-language="html">//布局的整体代码如下
<bodys class="frame">
    <header class="header">
        ...这里是头部内容，包括logo，用户信息，消息，退出，如有需要还可以添加其它的操作按钮
    </header>
    <nav class="navtab" id="navTab">
        ...这里是一级菜单，点击这里的一级菜单，加载相对应的二级菜单，一级菜单的数量不能过多
    </nav>
    <aside id="nav" class="nav">
        ...这里就是点击一级菜单加载二级菜单的位置，这里二级的加载使用ajax请求数据，然后在客户端使用handlebars模板进行解析
          数据格式在下面会提供
    </aside>
    <section id="main" class="main">
        ...这里就是放置子页面主要内容的地方了，显示子页面有两种方式，一种是直接显示在一个iframe当中
          另一种是通过js加载页面当中的内容，然后创建一个div在此处显示
    </section>
</bodys>
                    </code></pre>

                <pre><code data-language="js">//一级菜单的数据格式如下：
{
    data:[
                    {
                        id:id1, //菜单ID，根据该ID获取二级子菜单
                        txt:"菜单名称"，一级菜单的名称
                    },{
                        id:id1, //菜单ID，根据该ID获取二级子菜单
                        txt:"菜单名称"，一级菜单的名称
                    }
        ]                    
}
                    </code></pre>

                <pre>
<code data-language="js">//二级子菜单的数据格式如下（部分）
      data: [
                {
                    "title": "页面布局",
                    "src": "javascript:void(0);",
                    "id": "widgets",
                    "submenu": [
                            {
                                "title": "框架首页布局",
                                "src": "page/layout-index.html",
                                "id": "dialog"
                            },
                            {
                                "title": "内页布局",
                                "src": "page/layout-inner.html",
                                "id": "dialog"
                            }
                    ]
                },
                {
                    "title": "界面组件",
                    "src": "javascript:void(0);",
                    "id": "widgets",
                    "submenu": [
                        {
                            "title": "选项卡",
                            "src": "javascript:void(0);",
                            "id": "tabs",
                            "submenu": [
                                    {
                                        "title": "横向选项卡你好",
                                        "src": "page/widgets/tabs-hor.html",
                                        "id": "tabsHor"
                                    },
                                    {
                                        "title": "纵向选项卡你好",
                                        "src": "page/widgets/tabs-ver.html",
                                        "id": "tabsVer"
                                    }
                                ]
                        },
                        {
                            "title": "弹出框你好",
                            "src": "page/widgets/dialog.html",
                            "id": "dialog"
                        },
                        {
                            "title": "提示框",
                            "src": "page/widgets/alert.html",
                            "id": "alert"
                        },
                        {
                            "title": "下拉菜单",
                            "src": "page/widgets/dropmenu.html",
                            "id": "dropmenu"
                        },
                        {
                            "title": "文件上传",
                            "src": "page/widgets/upload.html",
                            "id": "upload"
                        }
                    ]
                },
                {
                    "title": "404",
                    "src": "page/404.html",
                    "id": "404"
                }
            ]
                    </code>
</pre>
            </div>
        </div>
    </div>

    <!--JS代码-->
    <script src="../../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../../assets/js/plugins/jquery.mui.js"></script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>
</body>
</html>
